/*
 * @Author: yuanxiang 
 * @Date: 2018-05-14 18:00:14 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-18 17:47:21
 */
<template>
    <div id="city" style="min-width:20rem;min-height:100px;height:820px"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/province/henan");
export default {
  data() {
    return {
      mapChart: null
    };
  },
  props: {
    hoverObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    mapHoverData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    cityId: {
      type: Number,
      default: () => {}
    }
  },
  watch: {
    mapHoverData(res) {
      this.initHeNan();
    }
  },
  mounted() {
    this.initHeNan();
  },
  methods: {
    resultHtml(name, cityObj) {
      return (
        "<div style='width:100%;height:100%;text-align:left;color:#31cee6'>" +
        "<span style='padding-bottom:5px'>" +
        name +
        "</span></br><span>门店数量" +
        "<span style='float:right;'>" +
        cityObj.storeNum +
        "家</span></span>" +
        "</span></br>累计成交套数" +
        "<span style='float:right;'>" +
        cityObj.incomeSum +
        "套</span>" +
        "</span></br>总收入" +
        "<span style='float:right;'>" +
        cityObj.dealNum +
        "元</span>" +
        "</div>"
      );
    },
    initHeNan() {
      var resArr = [
        {
          date: "2017",
          list: [
            {
              sum: 80,
              name: "门店数",
              list: [
                {
                  name: "洛阳",
                  value: 1000
                }
              ]
            },
            {
              sum: 1243,
              name: "成交数",
              list: [
                {
                  name: "洛阳",
                  value: 1243
                }
              ]
            },
            {
              sum: 20342,
              name: "交易额",
              list: [
                {
                  name: "洛阳",
                  value: 20342
                }
              ]
            },
            {
              sum: 100,
              name: "经纪人数",
              list: [
                {
                  name: "洛阳",
                  value: 100
                }
              ]
            },
            {
              sum: 2600,
              name: "房源数",
              list: [
                {
                  name: "洛阳",
                  value: 2600
                }
              ]
            },
            {
              sum: 4053,
              name: "客户数",
              list: [
                {
                  name: "洛阳",
                  value: 4053
                }
              ]
            }
          ]
        },
        {
          date: "2018",
          list: [
            {
              sum: 1180,
              name: "门店数",
              list: [
                {
                  name: "洛阳",
                  value: 1000
                },
                {
                  name: "郑州",
                  value: 180
                }
              ]
            },
            {
              sum: 5770,
              name: "成交数",
              list: [
                {
                  name: "洛阳",
                  value: 5000
                },
                {
                  name: "郑州",
                  value: 770
                }
              ]
            },
            {
              sum: 20990,
              name: "交易额",
              list: [
                {
                  name: "洛阳",
                  value: 10000
                },
                {
                  name: "郑州",
                  value: 10990
                }
              ]
            },
            {
              sum: 1920,
              name: "经纪人数",
              list: [
                {
                  name: "洛阳",
                  value: 1000
                },
                {
                  name: "郑州",
                  value: 920
                }
              ]
            },
            {
              sum: 5600,
              name: "房源数",
              list: [
                {
                  name: "洛阳",
                  value: 5000
                },
                {
                  name: "郑州",
                  value: 600
                }
              ]
            },
            {
              sum: 6034,
              name: "客户数",
              list: [
                {
                  name: "洛阳",
                  value: 5000
                },
                {
                  name: "郑州",
                  value: 134
                }
              ]
            }
          ]
        }
      ]
      var self = this;
      var option = {
        timeline: {
          axisType: "category",
          data: ["2017年", "2018年"],
          autoPlay: true,
          symbol: "circle",
          playInterval: 6000,
          lineStyle: {
            color: "#1FC1FF"
          },
          label: {
            color: "#1FC1FF",
            position: "top",
            fontSize: 20
          },
          itemStyle: {
            color: "#1FC1FF"
          },
          checkpointStyle: {
            color: "#55EEA8",
            borderWidth: 8,
            symbolSize: 10,
            borderColor: 'rgba(85,238,168, 0.5)'
          },
          controlStyle: {
            show: false
          }
        },
        baseOption: {
          title: {
            x: "center",
            textStyle: {
              color: "white"
            }
          },
          tooltip: {
            trigger: "item",
            position: "top",
            extraCssText:
              "text-align:center;background-color:rgba(0,0,0,0.8);background-size:100% 100%;width:30%;height:100px;color:#31cee6)",
            formatter: function(params) {
              var name = params.name;
              var result = "";
              var itemHover = {};
              var obj = {};
              if (name === "洛阳市") {
                itemHover = self.mapHoverData[0];
                obj = {
                  storeNum: 0,
                  dealNum: 0,
                  incomeSum: 0
                };
                result = self.resultHtml(name, obj);
              } else if (name === "郑州市") {
                itemHover = self.mapHoverData[1];
                obj = {
                  storeNum: 0,
                  dealNum: 0,
                  incomeSum: 0
                };
                result = self.resultHtml(name, obj);
              } else {
                obj = {
                  storeNum: 0,
                  dealNum: 0,
                  incomeSum: 0
                };
                result = self.resultHtml(name, obj);
              }
              // 收入、数量、成交套数
              return result;
            }
          },
          geo: {
            map: "河南",
            // 地图中心经纬度，郑州
            center: [113.65, 34],
            // 百度地图缩放
            zoom: 1.1, // 是否缩放 // 1.2 => 1
            left: 50,
            top: 20,
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "black"
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "black"
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#001086",
                areaColor: "#1599F5",
                borderWidth: 1
              }
            }
          },
          series: [
            {
              name: "门店",
              type: "map",
              geoIndex: 0,
              data: [
                {
                  name: "郑州市",
                  value: 30
                },
                {
                  name: "济源市",
                  value: 0
                },
                {
                  name: "三门峡市",
                  value: 0
                },
                {
                  name: "焦作市",
                  value: 0
                },
                {
                  name: "新乡市",
                  value: 0
                },
                {
                  name: "鹤壁市",
                  value: 0
                },
                {
                  name: "安阳市",
                  value: 0
                },
                {
                  name: "濮阳市",
                  value: 0
                },
                {
                  name: "开封市",
                  value: 0
                },
                {
                  name: "商丘市",
                  value: 0
                },
                {
                  name: "周口市",
                  value: 0
                },
                {
                  name: "许昌市",
                  value: 0
                },
                {
                  name: "平顶山市",
                  value: 0
                },
                {
                  name: "漯河市",
                  value: 0
                },
                {
                  name: "驻马店市",
                  value: 0
                },
                {
                  name: "信阳市",
                  value: 0
                },
                {
                  name: "南阳市",
                  value: 0
                },
                {
                  name: "洛阳市",
                  value: 100
                }
              ]
            }
          ]
        },
        options: [
          {
            series: {
              name: "点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin",
              symbolSize: 140,
              label: {
                normal: {
                  show: true,
                  formatter: function(params) {
                    return params.name;
                  },
                  textStyle: {
                    color: "black",
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                }
              },
              zlevel: 6,
              data: [
                {
                  name: "洛阳市",
                  value: [112.4600140829, 34.6244432169, 200],
                  itemStyle: {
                    normal: {
                      color: "#55EEA8" // 标志颜色
                    }
                  }
                }
              ]
            }
          },
          {
            series: {
              name: "点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin",
              symbolSize: 140,
              label: {
                normal: {
                  show: true,
                  formatter: function(params) {
                    return params.name;
                  },
                  textStyle: {
                    color: "black",
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                }
              },
              zlevel: 6,
              data: [
                {
                  name: "洛阳市",
                  value: [112.4600140829, 34.6244432169, 200],
                  itemStyle: {
                    normal: {
                      color: "#55EEA8" // 标志颜色
                    }
                  }
                }
              ]
            }
          },
          {
            series: {
              name: "点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin",
              symbolSize: 140,
              label: {
                normal: {
                  show: true,
                  formatter: function(params) {
                    return params.name;
                  },
                  textStyle: {
                    color: "black",
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                }
              },
              zlevel: 6,
              data: [
                {
                  name: "郑州市",
                  value: [113.6313915479, 34.7533581487, 100],
                  itemStyle: {
                    normal: {
                      color: "#1EC2FF" // 标志颜色
                    }
                  }
                },
                {
                  name: "洛阳市",
                  value: [112.4600140829, 34.6244432169, 200],
                  itemStyle: {
                    normal: {
                      color: "#55EEA8" // 标志颜色
                    }
                  }
                }
              ]
            }
          },
          {
            series: {
              name: "点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin",
              symbolSize: 140,
              label: {
                normal: {
                  show: true,
                  formatter: function(params) {
                    return params.name;
                  },
                  textStyle: {
                    color: "black",
                    fontSize: 18,
                    fontWeight: "bold"
                  }
                }
              },
              zlevel: 6,
              data: [
                {
                  name: "郑州市",
                  value: [113.6313915479, 34.7533581487, 100],
                  itemStyle: {
                    normal: {
                      color: "#1EC2FF" // 标志颜色
                    }
                  }
                },
                {
                  name: "洛阳市",
                  value: [112.4600140829, 34.6244432169, 200],
                  itemStyle: {
                    normal: {
                      color: "#55EEA8" // 标志颜色
                    }
                  }
                }
              ]
            }
          }
        ]
      };
      self.$emit("on-map", resArr[0]);
      self.mapChart = echarts.init(document.getElementById("city"));
      self.mapChart.setOption(option);
      self.mapChart.on("timelinechanged", function(params) {
        self.$emit("on-map", resArr[params.currentIndex]);

      });
    }
  }
};
</script>
<style>
</style>
